<template>
  <div class="wrapper">
    <table class="table">
      <tr>
        <th>id</th>
        <th>用户ID</th>
        <th>返现金额</th>
        <th>要求投资额</th>
        <th>要求期限</th>
        <th>获取时间</th>
        <th>过期时间</th>
        <th>激活时间</th>
        <th>是否已激活</th>
        <th>类型说明</th>
        <th>类型ID</th>
      </tr>
      <template v-if="tb.data && tb.data.length > 0">
        <tr v-for="(item,index) in tb.data" :key="index">
          <td v-text="item.id || ''"></td>
          <td v-text="item.fuid || ''"></td>
          <td v-text="item.ffxje || ''"></td>
          <td v-text="item.ftze || ''"></td>
          <td v-text="item.fqx || ''"></td>
          <td class="verMiddle">
            <span v-text="item.tdate || ''"></span>
          </td>
          <td class="verMiddle">
            <span v-text="item.tgqsj || ''"></span>
          </td>
          <td class="verMiddle">
            <span v-text="item.tjhsj || ''"></span>
          </td>
          <td v-text="item.tjhsj ? '已激活' : '未激活'" class="isjh"></td>
          <td class="verMiddle">
            <span v-text="item.csm || ''"></span>
          </td>
          <td v-text="item.flx || ''"></td>
        </tr>
      </template>
    </table>
    <p v-if="tb.num === 0" class="empty">暂无记录</p>
    <el-pagination v-else-if = "tb.num > 0" layout="prev, pager, next" :page-size="pageSize" :total="tb.num" @current-change="handleChangePage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'dialog7',
  data(){
    return {
      pageSize:10,
      curIndex:1,
      tb:{
        data:[],
        num:0
      }
    }
  },
  mounted(){
    this.getXJ()
  },
  methods: {
    handleChangePage(currentPage){
      this.curIndex = currentPage
      this.getXJ()
    },
    async getXJ() {
      try{
        const {leadInMsg} = this.$store.getters.callMsg
        let fUid = leadInMsg.id
        if(fUid === undefined){
          return
        }
        const initXJ = {
          data:[],
          num:0
        }
        const page = this.curIndex
        const pageSize = this.pageSize
        const {data} = await this.$get(this,{
          api:'member/getXjq.do',
          data: {
            fUid,
            page,
            pageSize
          }
        })
        if(data.state === 0){
          this.tb = data.content || initXJ
          return
        }
      }catch(e){
        this.$warn('系统member/getXjq.do接口报错')
      }
    },
  }

}
</script>

<style lang="scss" scoped>
.table {
  $tableBorderColor: #dddfe6;
  $tableBgColor: #fff;
  $color: #444;
  $dftColor: #7b8897;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid $tableBorderColor;
  border-left: 1px solid $tableBorderColor;
  th,
  td {
    border-right: 1px solid $tableBorderColor;
    border-bottom: 1px solid $tableBorderColor;
    background: $tableBgColor;
    text-align: center;
    line-height: 50px;
    color: $dftColor;
  }
  th {
    color: $color;
    font-size: 16px;
    font-weight: normal;
  }
  td {
    color: $dftColor;
    font-size: 14px;
  }
}
.empty{
  padding:15px;
  text-align:center;
}
.el-pagination{
  text-align:right;
}
.isjh{
  color:red !important;
}

.verMiddle{
  &::before{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
  }
  span{
    display:inline-block;
    line-height:20px !important;
    width:100%;
    vertical-align:middle;
  }
}
</style>
